<template>
  <view class="hs-tab-003">
    <scroll-view
      class="menu-scroll"
      scroll-x="true"
      :show-scrollbar="false"
      scroll-with-animation="true"
      @scroll="scrollFn"
    >
      <view class="hs-tab-item" v-for="(ic, ind) in dataList" :key="ind">
        <view class="menu-item">
          <text class="iconfont" :class="ic.icon"></text>
          <text class="title">{{ ic.title }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="slider-container">
      <view
        class="slider-high"
        :style="{ width: sliderHighWidth + 'px', left: sliderHighLeft + 'px' }"
      ></view>
    </view>
  </view>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";

export default defineComponent({
  name: "hstab003",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      scrollWidth: 0,
      allMenuItemWidth: 0,

      sliderContainerWidth: 0,
      sliderHighWidth: 0,
      sliderHighLeft: 0,
      dataList: [
        {
          icon: "icon-weibiaoti--40",
          title: "购物车",
        },
        {
          icon: "icon-weibiaoti--22",
          title: "关注商品",
        },
        {
          icon: "icon-weibiaoti--25",
          title: "地址管理",
        },
        {
          icon: "icon-weibiaoti--31",
          title: "标签管理",
        },
        {
          icon: "icon-weibiaoti--33",
          title: "更多设置",
        },
        {
          icon: "icon-weibiaoti--32",
          title: "工具",
        },
        {
          icon: "icon-weibiaoti--39",
          title: "统计",
        },
        {
          icon: "icon-weibiaoti--41",
          title: "周边产品",
        },
        {
          icon: "icon-weibiaoti--33",
          title: "更多设置",
        },
        {
          icon: "icon-weibiaoti--32",
          title: "工具",
        },
        {
          icon: "icon-weibiaoti--39",
          title: "统计",
        },
        {
          icon: "icon-weibiaoti--41",
          title: "周边产品",
        },
      ],
    });
    onMounted(() => {
      getScrollinfo();
      getAllMenuItem();
      setSliderHighSize();
    });
    const { proxy } = getCurrentInstance();
    const getScrollinfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".menu-scroll")
        .boundingClientRect((ele) => {
          data.scrollWidth = ele.width;
        })
        .exec();
    };
    const getAllMenuItem = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .selectAll(".hs-tab-item")
        .boundingClientRect((ele) => {
          let itemLength = ele.length;
          // console.log("ele", ele);
          for (let i = 0; i < itemLength; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            data.allMenuItemWidth += ele[i].width;
          }
        })
        .exec();
    };
    // 获取滑块容器的宽度，设置滑块高亮宽度
    const setSliderHighSize = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".slider-container")
        .boundingClientRect((ele) => {
          data.sliderContainerWidth = ele.width;
          data.sliderHighWidth =
            (data.scrollWidth / data.allMenuItemWidth) *
            data.sliderContainerWidth;
        })
        .exec();
    };
    // 滚动时计算滑块的位置left
    const scrollFn = (e) => {
      // 滚动的left
      const scrollLeft = e.detail.scrollLeft;
      // 计算出滚动的比例
      const leftProportion = scrollLeft / data.allMenuItemWidth;
      // 比例乘以滑块容器宽度得出left
      data.sliderHighLeft = data.sliderContainerWidth * leftProportion;
    };
    return {
      scrollFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-003 {
  padding: 20rpx 0;
  padding-right: 0;
  background: #fff;
  border-radius: 10rpx;
  padding-bottom: 30rpx;
  position: relative;
  .menu-scroll {
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    .hs-tab-item {
      display: inline-block;
      width: 25%;
      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .iconfont {
          font-size: 50rpx;
          color: #272727;
        }
        .title {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-weight: 300;
        }
      }
    }
  }
  .slider-container {
    position: absolute;
    bottom: 5rpx;
    left: 50%;
    transform: translateX(-50%);
    height: 6rpx;
    width: 80rpx;
    display: flex;
    background: #eee;
    border-radius: 3rpx;
    .slider-high {
      position: absolute;
      height: 100%;
      border-radius: 3rpx;
      background: #ff0777;
    }
  }
}
</style>
